CSS સબગ્રિડ મલ્ટિ-ડાયમેન્શનલ: જટિલ ગ્રિડ ઇનહેરિટન્સનો ઉપયોગ

CSS ગ્રિડ લેઆઉટે વેબ ડિઝાઇનમાં ક્રાંતિ લાવી છે, જે પેજ સ્ટ્રક્ચર પર અભૂતપૂર્વ નિયંત્રણ પૂરું પાડે છે. જોકે, જેમ જેમ લેઆઉટ વધુ જટિલ બને છે, તેમ તેમ વધુ અદ્યતન તકનીકોની જરૂરિયાત ઊભી થાય છે. અહીં CSS સબગ્રિડ આવે છે, એક શક્તિશાળી ફીચર જે ગ્રિડ લેઆઉટને વધારે છે, જે ગ્રિડ આઇટમ્સને તેમના પેરેન્ટ ગ્રિડની ટ્રેક વ્યાખ્યાઓ વારસામાં મેળવવા માટે સક્ષમ બનાવે છે. આ સાચા અર્થમાં મલ્ટિ-ડાયમેન્શનલ લેઆઉટની સંભાવનાને અનલૉક કરે છે, જ્યાં એલિમેન્ટ્સ સમગ્ર ગ્રિડ સ્ટ્રક્ચર સાથે ગોઠવણી જાળવી રાખીને રો અને કોલમમાં ફેલાઈ શકે છે.

CSS ગ્રિડ લેઆઉટને સમજવું: એક ઝડપી પુનરાવર્તન

સબગ્રિડમાં ઊંડા ઉતરતા પહેલાં, ચાલો CSS ગ્રિડ લેઆઉટના મુખ્ય ખ્યાલોની સંક્ષિપ્તમાં સમીક્ષા કરીએ:

• ગ્રિડ કન્ટેનર: પેરેન્ટ એલિમેન્ટ જે display: grid અથવા display: inline-grid નો ઉપયોગ કરીને ગ્રિડ સંદર્ભ સ્થાપિત કરે છે.
• ગ્રિડ આઇટમ્સ: ગ્રિડ કન્ટેનરના સીધા ચિલ્ડ્રન જે ગ્રિડની અંદર ગોઠવાયેલા હોય છે.
• ગ્રિડ ટ્રેક્સ: ગ્રિડની રો અને કોલમ, જે grid-template-rows અને grid-template-columns જેવી પ્રોપર્ટીઝ દ્વારા વ્યાખ્યાયિત થાય છે. આ રો અને કોલમના કદ અને સંખ્યાને વ્યાખ્યાયિત કરે છે.
• ગ્રિડ લાઇન્સ: આડી અને ઊભી લાઇન્સ જે ગ્રિડ ટ્રેક્સને અલગ પાડે છે. તે 1 થી શરૂ કરીને નંબરવાળી હોય છે.
• ગ્રિડ એરિયાઝ: ગ્રિડની અંદરના નામના પ્રદેશો, જે grid-template-areas દ્વારા વ્યાખ્યાયિત થાય છે.

આ મૂળભૂત બાબતો સાથે, આપણે CSS સબગ્રિડની જટિલતાઓ અને લાભોનું અન્વેષણ કરી શકીએ છીએ.

CSS સબગ્રિડનો પરિચય: ગ્રિડ ટ્રેક્સ વારસામાં મેળવવા

સબગ્રિડ એક ગ્રિડ આઇટમને પોતે એક ગ્રિડ કન્ટેનર બનવાની મંજૂરી આપે છે, જે તેના પેરેન્ટ ગ્રિડમાંથી રો અને/અથવા કોલમ ટ્રેક્સ વારસામાં મેળવે છે. આનો અર્થ એ છે કે સબગ્રિડ તેની સામગ્રીને પેરેન્ટ ગ્રિડની લાઇન્સ સાથે ગોઠવી શકે છે, જે એક સુસંગત અને દૃષ્ટિની આકર્ષક લેઆઉટ બનાવે છે, ખાસ કરીને જ્યારે પેરેન્ટ ગ્રિડમાં બહુવિધ રો અથવા કોલમમાં ફેલાયેલા એલિમેન્ટ્સ સાથે કામ કરતા હોય.

સબગ્રિડને સક્ષમ કરવા માટે મુખ્ય પ્રોપર્ટી grid-template-rows: subgrid અને/અથવા grid-template-columns: subgrid છે. જ્યારે ગ્રિડ આઇટમ પર લાગુ કરવામાં આવે છે, ત્યારે આ પ્રોપર્ટીઝ બ્રાઉઝરને પેરેન્ટ ગ્રિડમાંથી સંબંધિત ટ્રેક્સનો ઉપયોગ કરવા માટે કહે છે.

મૂળભૂત સબગ્રિડ અમલીકરણ

ચાલો એક સરળ ઉદાહરણ જોઈએ:

.grid-container {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 grid-template-rows: auto auto auto;
}

.grid-item {
 /* ગ્રિડ આઇટમ્સ માટે સ્ટાઇલ્સ */
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

આ ઉદાહરણમાં, .grid-container ત્રણ કોલમ અને ત્રણ રો સાથે મુખ્ય ગ્રિડ સ્ટ્રક્ચરને વ્યાખ્યાયિત કરે છે. .subgrid-item એ .grid-container ની અંદર એક ગ્રિડ આઇટમ છે જે તેની કોલમ માટે સબગ્રિડનો ઉપયોગ કરવા માટે ગોઠવેલ છે. આનો અર્થ એ છે કે .subgrid-item ની અંદરની કોલમ .grid-container ની કોલમ સાથે સંપૂર્ણ રીતે ગોઠવાશે.

સબગ્રિડ સાથે મલ્ટિ-ડાયમેન્શનલ લેઆઉટ્સ

સબગ્રિડની વાસ્તવિક શક્તિ મલ્ટિ-ડાયમેન્શનલ લેઆઉટ બનાવતી વખતે ઉભરી આવે છે. આ લેઆઉટ્સમાં નેસ્ટેડ ગ્રિડ્સનો સમાવેશ થાય છે જ્યાં એલિમેન્ટ્સ બહુવિધ રો અને કોલમમાં ફેલાયેલા હોય છે, અને ગોઠવણી નિર્ણાયક હોય છે.

ઉદાહરણ: એક જટિલ પ્રોડક્ટ કાર્ડ

એક પ્રોડક્ટ કાર્ડની કલ્પના કરો જેમાં એક છબી, શીર્ષક, વર્ણન અને કેટલીક વધારાની માહિતી પ્રદર્શિત કરવાની જરૂર છે. લેઆઉટ લવચીક અને રિસ્પોન્સિવ હોવો જોઈએ, જે વિવિધ સ્ક્રીન કદને અનુકૂળ થઈ શકે.

.product-card {
 display: grid;
 grid-template-columns: 1fr 2fr;
 grid-template-rows: auto auto auto;
 gap: 10px;
}

.product-image {
 grid-row: 1 / span 2;
}

.product-details {
 display: grid;
 grid-template-columns: subgrid;
 grid-template-rows: auto auto;
}

.product-title {
 /* શીર્ષક માટે સ્ટાઇલ્સ */
}

.product-description {
 /* વર્ણન માટે સ્ટાઇલ્સ */
}

.additional-info {
 grid-column: 1 / -1; /* પ્રોડક્ટ કાર્ડમાં બધી કોલમમાં ફેલાવો */
}

આ ઉદાહરણમાં:

• .product-card મુખ્ય ગ્રિડ કન્ટેનર છે.
• .product-image પ્રથમ બે રોમાં ફેલાયેલું છે.
• .product-details એક સબગ્રિડ છે જે .product-card માંથી કોલમ ટ્રેક્સ વારસામાં મેળવે છે, જે સુનિશ્ચિત કરે છે કે તેની સામગ્રી મુખ્ય ગ્રિડની કોલમ સાથે ગોઠવાયેલ છે.
• .additional-info પ્રોડક્ટ કાર્ડની બધી કોલમમાં ફેલાયેલું છે, જે છબી અને વિગતોની નીચે વધારાની માહિતી ઉમેરે છે.

આ સ્ટ્રક્ચર પ્રોડક્ટ કાર્ડ માટે એક લવચીક અને જાળવી શકાય તેવું લેઆઉટ પૂરું પાડે છે. સબગ્રિડ સુનિશ્ચિત કરે છે કે .product-details ની અંદરનું શીર્ષક અને વર્ણન મુખ્ય ગ્રિડની કોલમ સ્ટ્રક્ચર સાથે સંપૂર્ણપણે ગોઠવાયેલ છે.

ઉદાહરણ: એક જટિલ ટેબલ લેઆઉટ

મર્જ કરેલા સેલ્સવાળા ટેબલ એક લેઆઉટ દુઃસ્વપ્ન હોઈ શકે છે. સબગ્રિડ આને ખૂબ જ સરળ બનાવે છે.

.table-container {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 grid-template-rows: auto auto auto;
}

.header-cell {
 grid-column: span 2; /* ઉદાહરણ: બે કોલમમાં ફેલાયેલો સેલ */
}

.subgrid-row {
 display: grid;
 grid-template-columns: subgrid;
}

.data-cell {
 /* ડેટા સેલ્સ માટે સ્ટાઇલ્સ */
}

અહીં, .table-container સમગ્ર ટેબલ ગ્રિડને વ્યાખ્યાયિત કરે છે. `header-cell` એલિમેન્ટ્સ બહુવિધ કોલમમાં ફેલાઈ શકે છે. `subgrid-row` એ સુનિશ્ચિત કરવા માટે સબગ્રિડનો ઉપયોગ કરે છે કે બધા `data-cell` એલિમેન્ટ્સ પેરેન્ટ ગ્રિડમાં વ્યાખ્યાયિત કોલમ સાથે યોગ્ય રીતે ગોઠવાય, હેડર સેલ સ્પાન્સને ધ્યાનમાં લીધા વિના.

CSS સબગ્રિડનો ઉપયોગ કરવાના ફાયદા

• સુધારેલ લેઆઉટ નિયંત્રણ: સબગ્રિડ એલિમેન્ટની સ્થિતિ અને ગોઠવણી પર ઝીણવટભર્યું નિયંત્રણ પૂરું પાડે છે, ખાસ કરીને જટિલ લેઆઉટ્સમાં.
• સરળ કોડ: તે જટિલ ગણતરીઓ અને મેન્યુઅલ ગોઠવણોની જરૂરિયાત ઘટાડે છે, જેનાથી કોડ સ્વચ્છ અને વધુ જાળવી શકાય તેવો બને છે.
• ઉન્નત રિસ્પોન્સિવનેસ: સબગ્રિડ વધુ લવચીક અને રિસ્પોન્સિવ ડિઝાઇન માટે પરવાનગી આપે છે જે વિવિધ સ્ક્રીન કદને સરળતાથી અનુકૂલન કરે છે.
• વધુ સુસંગતતા: સમગ્ર ગ્રિડ સ્ટ્રક્ચર સાથે ગોઠવણી જાળવી રાખીને વેબસાઇટના વિવિધ વિભાગોમાં દ્રશ્ય સુસંગતતા સુનિશ્ચિત કરે છે.
• વધુ સારી જાળવણીક્ષમતા: પેરેન્ટ ગ્રિડમાં ફેરફારો આપમેળે સબગ્રિડમાં પ્રસારિત થાય છે, જે લેઆઉટ ગોઠવણોને સરળ બનાવે છે અને ભૂલોનું જોખમ ઘટાડે છે.

બ્રાઉઝર સુસંગતતા

CSS સબગ્રિડ માટે બ્રાઉઝર સપોર્ટ હવે ક્રોમ, ફાયરફોક્સ, સફારી અને એજ સહિતના આધુનિક બ્રાઉઝર્સમાં વ્યાપકપણે ઉપલબ્ધ છે. જોકે, તમારા લક્ષ્ય પ્રેક્ષકો પાસે પૂરતો બ્રાઉઝર સપોર્ટ છે તેની ખાતરી કરવા માટે Can I use જેવી વેબસાઇટ્સ પર વર્તમાન બ્રાઉઝર સુસંગતતા ટેબલ તપાસવું આવશ્યક છે.

સબગ્રિડને સપોર્ટ ન કરતા જૂના બ્રાઉઝર્સ માટે, નીચેની જેવી ફોલબેક વ્યૂહરચનાઓનો ઉપયોગ કરવાનું વિચારો:

• સબગ્રિડ વિના CSS ગ્રિડ: સ્ટાન્ડર્ડ CSS ગ્રિડ ફીચર્સનો ઉપયોગ કરીને લેઆઉટને પુનરાવર્તિત કરો, જેમાં સંભવતઃ વધુ મેન્યુઅલ ગોઠવણોની જરૂર પડી શકે છે.
• ફ્લેક્સબોક્સ: સરળ લેઆઉટ્સ માટે ફ્લેક્સબોક્સનો ફોલબેક તરીકે ઉપયોગ કરો.
• ફીચર ક્વેરીઝ: સબગ્રિડ સપોર્ટ શોધવા અને તે મુજબ વિવિધ સ્ટાઇલ્સ લાગુ કરવા માટે @supports નો ઉપયોગ કરો.

CSS સબગ્રિડનો ઉપયોગ કરવા માટે શ્રેષ્ઠ પદ્ધતિઓ

• તમારા ગ્રિડ સ્ટ્રક્ચરની યોજના બનાવો: સબગ્રિડનો અમલ કરતા પહેલાં, તમારા ગ્રિડ સ્ટ્રક્ચરની કાળજીપૂર્વક યોજના બનાવો અને એવા ક્ષેત્રોને ઓળખો જ્યાં સબગ્રિડ સૌથી વધુ ફાયદાકારક હોઈ શકે.
• અર્થપૂર્ણ ક્લાસ નામોનો ઉપયોગ કરો: કોડ વાંચનીયતા અને જાળવણીક્ષમતા સુધારવા માટે વર્ણનાત્મક ક્લાસ નામોનો ઉપયોગ કરો.
• વધુ પડતા નેસ્ટિંગને ટાળો: જ્યારે સબગ્રિડ નેસ્ટેડ ગ્રિડ્સ માટે પરવાનગી આપે છે, ત્યારે વધુ પડતા નેસ્ટિંગને ટાળો, કારણ કે તે લેઆઉટને સંચાલિત કરવું મુશ્કેલ બનાવી શકે છે.
• સંપૂર્ણપણે પરીક્ષણ કરો: તમારું લેઆઉટ યોગ્ય રીતે અને રિસ્પોન્સિવલી રેન્ડર થાય તેની ખાતરી કરવા માટે તેને વિવિધ બ્રાઉઝર્સ અને ઉપકરણો પર પરીક્ષણ કરો.
• ફોલબેક્સ પ્રદાન કરો: સબગ્રિડને સપોર્ટ ન કરતા જૂના બ્રાઉઝર્સ માટે ફોલબેક વ્યૂહરચનાઓનો અમલ કરો.
• ઍક્સેસિબિલિટીનો વિચાર કરો: ખાતરી કરો કે તમારું લેઆઉટ વિકલાંગ વપરાશકર્તાઓ માટે સુલભ છે. સિમેન્ટિક HTML નો ઉપયોગ કરો અને છબીઓ માટે વૈકલ્પિક ટેક્સ્ટ પ્રદાન કરો.
• પ્રદર્શન માટે ઑપ્ટિમાઇઝ કરો: શ્રેષ્ઠ પ્રદર્શન સુનિશ્ચિત કરવા માટે ગ્રિડ આઇટમ્સની સંખ્યા ઓછી કરો અને જટિલ ગણતરીઓ ટાળો.

અદ્યતન સબગ્રિડ તકનીકો

સબગ્રિડમાં ટ્રેક્સ સ્પાન કરવા

નિયમિત ગ્રિડ લેઆઉટની જેમ, તમે સબગ્રિડની અંદર કોઈ આઇટમને બહુવિધ ટ્રેક્સમાં ફેલાવવા માટે grid-column: span X અથવા grid-row: span Y નો ઉપયોગ કરી શકો છો.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.spanning-item {
 grid-column: span 2;
}

આ .spanning-item ને સબગ્રિડની અંદર બે કોલમ ટ્રેક્સ પર કબજો કરાવશે.

નામવાળી ગ્રિડ લાઇન્સનો ઉપયોગ કરવો

તમે પેરેન્ટ ગ્રિડમાં નામવાળી ગ્રિડ લાઇન્સનો ઉપયોગ કરી શકો છો અને તેમને સબગ્રિડમાં સંદર્ભિત કરી શકો છો. આ તમારા કોડને વધુ વાંચનીય અને જાળવવામાં સરળ બનાવી શકે છે.

.grid-container {
 display: grid;
 grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
}

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
}

.positioned-item {
 grid-column: content-start / content-end;
}

આ ઉદાહરણમાં, .positioned-item ને content-start અને content-end નામની ગ્રિડ લાઇન્સની વચ્ચે મૂકવામાં આવશે.

સબગ્રિડને ઓટો-પ્લેસમેન્ટ સાથે જોડવું

તમે સબગ્રિડને grid-auto-flow પ્રોપર્ટી સાથે જોડી શકો છો જેથી સબગ્રિડની અંદર આઇટમ્સ કેવી રીતે આપમેળે મૂકવામાં આવે તે નિયંત્રિત કરી શકાય.

.subgrid-item {
 display: grid;
 grid-template-columns: subgrid;
 grid-auto-flow: row dense;
}

આ બ્રાઉઝરને સબગ્રિડમાં આપમેળે આઇટમ્સ મૂકવા, કોઈપણ ગાબડા ભરવા અને વધુ કોમ્પેક્ટ લેઆઉટ બનાવવા માટે પ્રેરિત કરશે.

સબગ્રિડના વાસ્તવિક-વિશ્વ ઉદાહરણો

ડેશબોર્ડ લેઆઉટ્સ

ડેશબોર્ડ્સને ઘણીવાર બહુવિધ વિભાગો અને ઘટકો સાથે જટિલ લેઆઉટ્સની જરૂર પડે છે. સબગ્રિડનો ઉપયોગ સમગ્ર ડેશબોર્ડ માટે એક સુસંગત અને રિસ્પોન્સિવ ગ્રિડ સ્ટ્રક્ચર બનાવવા માટે થઈ શકે છે, જે ખાતરી કરે છે કે બધા એલિમેન્ટ્સ યોગ્ય રીતે ગોઠવાયેલા છે.

ઉદાહરણ તરીકે, સાઇડબાર, મુખ્ય સામગ્રી ક્ષેત્ર અને ફૂટરવાળા ડેશબોર્ડનો વિચાર કરો. સબગ્રિડનો ઉપયોગ આ દરેક વિભાગની અંદરની સામગ્રીને ડેશબોર્ડના સમગ્ર ગ્રિડ સ્ટ્રક્ચર સાથે ગોઠવવા માટે થઈ શકે છે.

મેગેઝિન લેઆઉટ્સ

મેગેઝિન લેઆઉટ્સમાં સામાન્ય રીતે છબીઓ, ટેક્સ્ટ અને અન્ય એલિમેન્ટ્સ સાથે જટિલ ડિઝાઇનનો સમાવેશ થાય છે જે દૃષ્ટિની આકર્ષક રીતે ગોઠવાયેલા હોય છે. સબગ્રિડનો ઉપયોગ મેગેઝિન લેઆઉટ માટે લવચીક અને રિસ્પોન્સિવ ગ્રિડ સ્ટ્રક્ચર બનાવવા માટે થઈ શકે છે, જે ડાયનેમિક સામગ્રી પ્લેસમેન્ટ અને ગોઠવણી માટે પરવાનગી આપે છે.

મુખ્ય લેખ, સાઇડબાર અને જાહેરાતોવાળા મેગેઝિન લેઆઉટની કલ્પના કરો. સબગ્રિડનો ઉપયોગ આ દરેક વિભાગની અંદરની સામગ્રીને મેગેઝિનના સમગ્ર ગ્રિડ સ્ટ્રક્ચર સાથે ગોઠવવા માટે થઈ શકે છે.

ઈ-કોમર્સ પ્રોડક્ટ લિસ્ટિંગ્સ

ઈ-કોમર્સ વેબસાઇટ્સ ઘણીવાર પ્રોડક્ટ લિસ્ટિંગ્સને ગ્રિડ ફોર્મેટમાં પ્રદર્શિત કરે છે. સબગ્રિડનો ઉપયોગ પ્રોડક્ટ લિસ્ટિંગ્સ માટે એક સુસંગત અને રિસ્પોન્સિવ ગ્રિડ સ્ટ્રક્ચર બનાવવા માટે થઈ શકે છે, જે ખાતરી કરે છે કે બધા પ્રોડક્ટ કાર્ડ્સ યોગ્ય રીતે ગોઠવાયેલા છે અને વિવિધ સ્ક્રીન કદને અનુકૂલન કરે છે.

બહુવિધ પ્રોડક્ટ કાર્ડ્સવાળા પ્રોડક્ટ લિસ્ટિંગ પેજને ધ્યાનમાં લો, જેમાં દરેક કાર્ડમાં એક છબી, શીર્ષક, વર્ણન અને કિંમત હોય. સબગ્રિડનો ઉપયોગ દરેક પ્રોડક્ટ કાર્ડની અંદરના એલિમેન્ટ્સને પ્રોડક્ટ લિસ્ટિંગ પેજના સમગ્ર ગ્રિડ સ્ટ્રક્ચર સાથે ગોઠવવા માટે થઈ શકે છે.

CSS ગ્રિડ અને સબગ્રિડનું ભવિષ્ય

CSS ગ્રિડ લેઆઉટ અને સબગ્રિડ સતત વિકસિત થઈ રહ્યા છે, જેમાં નિયમિતપણે નવી સુવિધાઓ અને સુધારાઓ ઉમેરવામાં આવે છે. જેમ જેમ બ્રાઉઝર સપોર્ટ સુધરતો રહેશે, તેમ તેમ આ ટેકનોલોજી આધુનિક અને રિસ્પોન્સિવ વેબ લેઆઉટ્સ બનાવવા માટે વધુ આવશ્યક બનશે.

CSS ગ્રિડ અને સબગ્રિડના ભવિષ્યમાં સંભવતઃ આનો સમાવેશ થશે:

• સુધારેલ પ્રદર્શન: ગ્રિડ અને સબગ્રિડ લેઆઉટ્સના રેન્ડરિંગ પ્રદર્શનને સુધારવા માટે ઑપ્ટિમાઇઝેશન.
• વધુ અદ્યતન સુવિધાઓ: લેઆઉટ અને ગોઠવણી પર વધુ નિયંત્રણ પ્રદાન કરવા માટે નવી સુવિધાઓ.
• અન્ય વેબ ટેકનોલોજી સાથે વધુ સારું સંકલન: વેબ કમ્પોનન્ટ્સ અને જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક જેવી અન્ય વેબ ટેકનોલોજી સાથે સીમલેસ સંકલન.

નિષ્કર્ષ: સબગ્રિડની શક્તિને અપનાવો

CSS સબગ્રિડ એ જટિલ, મલ્ટિ-ડાયમેન્શનલ લેઆઉટ્સ બનાવવા માટે એક શક્તિશાળી સાધન છે, જેમાં અદ્યતન ગ્રિડ ઇનહેરિટન્સ છે. ગ્રિડ લેઆઉટની મૂળભૂત બાબતો અને સબગ્રિડની ક્ષમતાઓને સમજીને, તમે વેબ ડિઝાઇન માટે નવી શક્યતાઓને અનલૉક કરી શકો છો અને વધુ દૃષ્ટિની આકર્ષક અને રિસ્પોન્સિવ વેબસાઇટ્સ બનાવી શકો છો.

જેમ જેમ સબગ્રિડ માટે બ્રાઉઝર સપોર્ટ સુધરતો રહેશે, તેમ તેમ તે વેબ ડેવલપરના ટૂલકિટનો વધુને વધુ મહત્વપૂર્ણ ભાગ બનશે. તેથી, સબગ્રિડની શક્તિને અપનાવો અને અદભૂત અને નવીન વેબ લેઆઉટ્સ બનાવવા માટે તેની ક્ષમતાઓ સાથે પ્રયોગ કરવાનું શરૂ કરો.

પ્રયોગ કરવા અને CSS સબગ્રિડની સંપૂર્ણ સંભવિતતાનું અન્વેષણ કરવાથી ડરશો નહીં. શક્યતાઓ વિશાળ છે, અને પરિણામો ખરેખર પ્રભાવશાળી હોઈ શકે છે. હેપી કોડિંગ!

વધુ શીખવા માટેના સંસાધનો

• MDN વેબ ડૉક્સ: CSS સબગ્રિડ લેઆઉટ
• CSS-Tricks: સબગ્રિડ ફાયરફોક્સમાં આવી રહ્યું છે
• ગ્રિડ બાય એક્ઝામ્પલ